<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <title>添加用户</title>
        <header th:replace="sys/head::html"></header>
    </head>
    <body>
        <form class="layui-form">
            <input type="hidden" th:value="${sysUser.id}" id="userId" name="id">
            <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  <span class="x-red">*</span>用户名
              </label>
              <div class="layui-input-inline">
                  <input type="text" th:value="${sysUser.username}" id="username" name="username" required="" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">*</span>将会成为您唯一的登入名
              </div>
          </div>
          <div class="layui-form-item">
              <label for="phone" class="layui-form-label">
                  <span class="x-red">*</span>手机
              </label>
              <div class="layui-input-inline">
                  <input type="text" th:value="${sysUser.phone}" id="phone" name="phone" required="" lay-verify="phone"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
            <div class="layui-form-item">
                <label for="L_birthday" class="layui-form-label">
                   生日
                </label>
                <div class="layui-input-inline">
                    <input type="text" th:value="${sysUser.birthday}" id="birthday" name="birthday" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>邮箱
              </label>
              <div class="layui-input-inline">
                  <input type="text" th:value="${sysUser.email}" id="L_email" name="email" required="" lay-verify="email"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-block">
                  <input type="radio" th:value="${sysUser.sex}" name="sex" value="1" title="男" checked />
                  <input type="radio" th:value="${sysUser.sex}" name="sex" value="0" title="女" />
              </div>
          </div>
<!--          <div class="layui-form-item">-->
<!--              <label class="layui-form-label">角色</label>-->
<!--              <div class="layui-input-block show-role-container">-->
<!--              </div>-->
<!--          </div>-->
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="edit" lay-submit="">
                  提交
              </button>
          </div>
      </form>

    <script>layui.use(['form', 'layer', 'laydate'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate;
            // getAllRole(function () {
            //     layui.form.render('radio');
            // });
            laydate.render({
                elem: '#L_birthday',
                format: 'yyy-MM-dd'
            })
            //自定义验证规则
            form.verify({
                nikename: function(value) {
                    if (value.length < 5) {
                        return '昵称至少得5个字符啊';
                    }
                },
                telephone: [/(.+){6,12}$/, '电话号码必须6到12位'],
                password: [/(.+){6,12}$/, '密码必须6到12位'],
                repass: function(value) {
                    if ($('#L_pass').val() != $('#L_repass').val()) {
                        return '两次密码不一致';
                    }
                }
            });

            //监听提交
            form.on('submit(edit)',
            function(data) {
               var roleRadio = $('[name=roleId]:checked');
               if(roleRadio == undefined || roleRadio.length <= 0){
                   layer.alert("请配置角色");
                   return false;
               }
               data.field.roleId = roleRadio.val();
               $.ajax({
                   url: appPath + '/sys/user/update',
                   type: 'post',
                   data: data.field,
                   dataType: 'json',
                   success: function (result) {
                        if(result.code == 200){
                            layer.alert("更新成功", {
                                    icon: 6
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        }else{
                            layer.alert(result.msg);
                        }
                   }
               })

                return false;
            });

        });
        // function getAllRole(callback) {
        //     $.ajax({
        //         url: '/role/all',
        //         type: 'get',
        //         dataType: 'json',
        //         success: function (result) {
        //             var html = '';
        //             if(result.datas && result.datas.length > 0) {
        //                 for(i in result.datas) {
        //                     var data = result.datas[i];
        //                     html += '<input type="radio" name="roleId" value="'+data.id+'" title="'+data.name+'" >' +
        //                             '<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-main layui-icon"></i><div>'+data.name+'</div></div>'
        //                 }
        //                 $('.show-role-container').html(html);
        //                 getCurrentUserRole(callback);
        //             }
        //         }
        //     });
        // }
        function getCurrentUserRole(callback) {
            var userId = $('#userId').val();
            $.ajax({
                url: appPath + '/sys/userRole/getRoleUserByUserId',
                type: 'get',
                data: {userId: userId},
                dataType: 'json',
                success: function (result) {
                   if(result.code == 200){
                       if(result.data) {
                           $('[name=roleId]').each(function () {
                                if($(this).val() == result.data.roleId){
                                    $(this).attr('checked', 'checked');
                                    return false;
                                }
                           })
                       }
                   }
                    if(callback){
                        callback();
                    }
                }
            });

        }
    </script>

    </body>

</html>
